<template>
  <div class="map-echart">
    <xjh-echart :options="(options as EChartsOption)"></xjh-echart>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, withDefaults } from 'vue';
import { EChartsOption } from 'echarts';

import xjhEchart from '@/base-ui/echart';
import { convertData } from '../utils/convert-data';
// import { IPieEchartDataType } from '../types';

const props = withDefaults(defineProps<{ mapData: any }>(), {});

const options = computed(() => {
  return {
    backgroundColor: '#fff',
    title: {
      text: '全国销量统计',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        return params.name + ':' + params.value[2];
      }
    },
    visualMap: {
      min: 0,
      max: 60000,
      left: 20,
      bottom: 20,
      calculable: true,
      text: ['高', '低'],
      inRange: {
        color: ['rgb(70,240,252)', 'rgb(250,220,46)', 'rgb(245,38,186)']
      },
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      roam: 'scale',
      // emphasis: {
      // },
      itemStyle: {
        areaColor: '#f4cccc'
      }
    },
    series: [
      {
        name: '销量',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: convertData(props.mapData),
        symbolSize: 12,
        // 做标记使用
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      },
      {
        type: 'map',
        map: 'china',
        geoIndex: 0,
        aspectScale: 0.75,
        tooltip: {
          show: false
        }
      }
    ]
  };
});
</script>

<style lang="less" scoped>
.map-echart {
  color: red;
}
</style>
